<template>
    <div
        v-if="isDisplay(col.renderType,['ADDRESS','MAP','REG_LIB','CUR_NODE','NUMBER','DATE','SEARCH','CUR_ASSIGNEE','DICRENDER','RELQUERY'])"
        v-html=" item[col.field + '_display']">
    </div>
    <div class="displayApply"
         v-else-if="isDisplay(col.renderType,['DISPLAY_RANGE','DISPLAY_LABEL','DISPLAY_ITEMS'])"
         v-html="item[col.field+'_display']"></div>
    <!--    图片-->
    <div v-else-if="isDisplay(col.renderType,['IMG'])">
        <ul class="rx-img-flex">
            <li v-for="(file,index) in JSON.parse(item[col.field])" :key="index">
                <image :src="rxImg(file)"/>
            </li>
        </ul>
    </div>
    <!-- 关联流程 -->
    <div v-else-if="isDisplay(col.renderType,['LINK_FLOW'])">
        {{ bpmFlow(item[col.field + '_render']) }}
        <span class="rxConnect">{{ bpmTask }}</span>
        <span style="color: red;"
              v-for="(bpmItem,index) in bpmBacklog" :key="index">{{ bpmItem.name }}</span>
    </div>
    <div v-else-if="col.renderType =='COMMON'">
        <rx-render :col="col" :record="item" :index="index"></rx-render>
    </div>
    <!-- 状态 -->
    <div v-else-if="col.renderType =='FLOW_STATUS'">
        {{ getFieldVal(item[col.field]) }}
    </div>
    <!--    创建人id-->
    <div style="word-wrap:break-word;word-break:break-all;" v-else-if="isDisplay(col.renderType,['USER'])">
        {{ userVal(item[col.field + '_render']) }}
    </div>
    <!--    组id-->
    <div v-else-if="isDisplay(col.renderType,['GROUP','SYSINST'])">
        {{ groupVal(item[col.field + '_render']) }}
    </div>
    <!--    列表渲染-->
    <div style="color: #0A98D5" v-else-if="isDisplay(col.renderType,['LIST'])">
        {{ item[col.field] }}
    </div>
    <div v-else-if="col.renderType=='APPENDIX'">
        <!--    附件   -->
        <div class="officeLayout" v-for="file in upload(item[col.field])" @click="preViewOfficeDome(file)">
            <i :class="['iconfont',getIconfont(file.name)]"></i>
            <div :class="[isShowDown()?'officeLayout-name officeLayout-down':'officeLayout-name']">{{ file.name }}</div>
        </div>
    </div>
    <div v-else>{{ item[col.field] }}</div>
</template>

<script>
import RxRender from "./RxRender.vue";
import TokenUtil from "@/common/TokenUtil";
export default {
    name: 'rx-list-field',
    components: {
        RxRender
    },
    props: {
        item: "",
        index: 0,
        col: "",
    },
    data() {
        return {
            backgroundlist: '',
            fgcolor: '',
            params: {},
            showBpmInstLink: false, //显示流程明细连接
            bpmTask: '', //流程明细
            bpmBacklog: [], //流程代办
            fileType: {//类名
                image: ['img', 'png', 'jpg', 'jpeg', 'svg'],
                media: ['mp3', 'mp4', 'avi', 'rmvb'],
                compressed: ['zip', 'rar'],
                office: ['ppt', 'pptx', 'xls', 'xlsx', 'doc', 'docx'],
                pdf: ['pdf'],
                email: ['eml'],
                axure: ['rp'],
                xmind: ['xmind'],
                certificate: ['p12', 'pfx', 'cer'],
                cipher: ['pem'],
                txt: ['txt']
            },
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formBoListStylizeLang", key);
        },
        upload(val) {
            return val?JSON.parse(val):[]
        },
        isShowDown(){
            if(this.col.renderConf){
                let renderConf =  JSON.parse(this.col.renderConf);
                return renderConf.isShowDown
            }
            return false
        },
        preViewOfficeDome(file) {
            if(!this.isShowDown()){ return;}
            var isOffice = false;
            var isImage = false;
            var mediaType = [
                ...this.fileType['media'],
                ...this.fileType['office'],
                ...this.fileType['pdf'],
                ...this.fileType['txt']
            ];
            var imageType = [
                ...this.fileType['image']
            ];
            let extName = file.name.substring(file.name.lastIndexOf('.') + 1);
            if (mediaType.contains(extName)) {
                isOffice = true;
            } else if (imageType.contains(extName)) {
                isImage = true;
            }
            if (!isOffice && !isImage) return;
            if (isOffice) {
                uni.openDocument({
                    filePath: this.imageUrl(file.id),
                    success: function (res) {
                        console.log('打开文档成功');
                    }
                });
            } else if (isImage) {
                    uni.previewImage({
                        current: 1,
                        urls: [this.imageUrl(file.id)]
                    });
            }
        },
        getIconfont(name) {
            let nameType = name.split('.')
            let extName = nameType[nameType.length-1]
            var mediaType = ['mp3', 'mp4', 'avi', 'rmvb'];
            var zipTtp = ['zip', 'rar'];
            var pptType = ['ppt', 'pptx'];
            var pdfType = ['pdf'];
            var docType = ['doc', 'docx']
            var xlsType = ['xls', 'xlsx'];
            var txtType = ['txt'];
            var picType = ['jpg', 'png', 'jpeg'];
            if (mediaType.contains(extName)) {
                return 'icon-file-Audio-fill';
            }
            if (zipTtp.contains(extName)) {
                return 'icon-file-zip2-fill';
            } else if (xlsType.contains(extName)) {
                return 'icon-file-excel-fill';
            } else if (docType.contains(extName)) {
                return 'icon-file-word-fill';
            } else if (pptType.contains(extName)) {
                return 'icon-file-excel-fill';
            } else if (txtType.contains(extName)) {
                return 'icon-file-txt-fill1';
            } else if (pdfType.contains(extName)) {
                return 'icon-file-pdf2-fill';
            } else if (picType.contains(extName)) {
                return 'icon-file-image-fill';
            } else {
                return 'icon-file-zip2-fill'
            }
        },
        groupVal(type) {
            if (type) {
                let obj = JSON.parse(type)
                let name = [];
                obj.group.forEach(res => {
                    name.push(res[obj.renderConfObj.showPath])
                })
                return name.join(',')
            }
            return ''
        },
        userVal(type) {
            if (type) {
                let obj = JSON.parse(type)
                let name = [];
                obj.user.forEach(res => {
                    name.push(res[obj.renderConfObj.showField])
                })
                return name.join(',')
            }
            return ''
        },
        getFieldVal(value) {
            switch (value) {
                case 'DELETE':
                    return this.$ti18('rxList.delBtn', '删除');
                case 'DRAFTED':
                    return this.i18n('draft', '草稿');
                case 'SUCCESS_END':
                    return this.i18n('successEnd', '成功结束');
                case 'CANCEL':
                    return this.i18n('cancel', '作废');
                case 'SUBMIT':
                    return this.$ti18('rxForm.commitBtn', '提交');
                case 'ABORT_END':
                    return this.i18n('abort', '异常结束');
                case 'ERROR_END':
                    return this.i18n('abort', '异常结束');
                case 'LOCKED':
                    return this.i18n('lock', '锁定');
                case 'SUPSPEND':
                    return this.i18n('suspend', '暂停');
                case 'PENDING':
                    return this.i18n('btnPending', '挂起');
                case 'NULL':
                    return '';
                default :
                    return this.i18n('running', '运行中')
            }
        },
        bpmFlow(flow) {
            if (this.col.renderConf) {
                var json = JSON.parse(this.col.renderConf);
                if (json.showBpmInstLink) {
                    this.showBpmInstLink = json.showBpmInstLink
                }
            }
            if (flow) {
                if (JSON.parse(flow).taskAry) {
                    var taskAry = JSON.parse(flow).taskAry;
                    var obj = {
                        name: '',
                        taskId: '',
                    }
                    for (var user of taskAry) {
                        obj.name = user.taskName + '(' + user.taskUsers + ')';
                        obj.taskId = user.taskId
                        this.bpmBacklog.push(obj)
                    }
                    this.bpmTask = JSON.parse(flow).subject;
                } else {
                    this.bpmTask = JSON.parse(flow).subject
                }
            } else {
                this.bpmTask = flow
            }
        },
        isDisplay(renderType, types) {
            if (!renderType) {
                return false
            }
            return types.includes(renderType);
        },
        image(fileId) {
            let token = TokenUtil.getToken();
            return "/api/api-system/system/core/sysFile/previewFile?fileId=" + fileId.fileId + "&accessToken=" + token
        },
        rxImg(type){
            return type.url?type.url:type
        }
    }
}
</script>

<style scoped>
.rxConnect {
    color: #007AFF;
}

.displayApply >>> span {
    border-radius: 5px;
    padding: 0px 5px;
}

.rx-u-line-progress >>> span {
    margin-left: 5px;
    line-height: 13px;
}

.rx-u-line-progress span {
    float: left;
}

.rx-u-line-progress {
    margin-top: 5px;
}

.rx-img-flex {
    display: flex;
    background: #fff;
    margin: 0.2rem 0;
    flex-wrap: wrap;
    padding: 0;
}

.rx-img-flex image {
    width: 5rem;
    height: 5rem;
    border-radius: 0.3rem;
    border: 1px solid #e4ecec;
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.rx-img-flex li {
    position: relative;
    margin: 0 0.8rem 0.4rem 0;
    list-style: none;
}

.officeLayout {
    width: 100%;
    font-size: 14px;
    padding: 0.2rem 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.officeLayout-name {
    white-space: nowrap;
    color: #bcbebf;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 1;
    text-align: left;
    margin-left: 0.5rem;
    max-width: 7rem;
}

.officeLayout i {
    font-size: 1.5rem;
}

.icon-file-Audio-fill {
    color: rgba(255, 125, 0, 1);
}

.icon-file-zip2-fill {
    color: rgba(255, 191, 67, 1);
}

.icon-file-markdown-fill {
    color: rgba(66, 133, 244, 1);
}

.icon-file-word-fill {
    color: rgba(66, 133, 244, 1);
}

.icon-file-image-fill {
    color: rgba(252, 89, 89, 1);
}

.icon-file-excel-fill {
    color: rgba(0, 186, 173, 1);
}

.icon-file-txt-fill1 {
    color: rgba(255, 191, 67, 1);
}

.icon-file-pdf2-fill {
    color: rgba(252, 89, 89, 1);
}

.icon-file-unknown-fill {
    color: rgba(166, 166, 166, 1);
}
.officeLayout-down{
    color: rgba(66, 133, 244, 1);
}
</style>
